<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span style="width: 100px" class="s1"
                            ><span
                                style="
                                    color: red;
                                    position: relative;
                                    top: 2px;
                                    margin-right: 2px;
                                "
                                >*</span
                            >{{ $t('basics.renwumingchen') }}</span
                        >
                        <a-input
                            v-model="form.task_name"
                            :placeholder="$t('basics.renwumingchenText')"
                        />
                    </div>
                    <div>
                        <span style="width: 50px" class="s1"
                            ><span
                                style="
                                    color: red;
                                    position: relative;
                                    top: 2px;
                                    margin-right: 2px;
                                "
                                >*</span
                            >{{ $t('basics.xiangmu') }}</span
                        >
                        <a-input v-model="projectName" disabled />
                    </div>
                    <div>
                        <a-popover position="top">
                            <a-button type="primary" @click="importButton">
                                {{ $t('basics.mobanTxt') }}
                            </a-button>
                            <!-- <div
                                class="btn"
                                style="width: 100px"
                                @click="importButton"
                            >
                                {{ $t('basics.mobanTxt') }}
                            </div> -->
                            <template #content>
                                <div class="tem-txt" style="text-align: center">
                                    <p>
                                        {{ $t('basics.textOne') }}
                                    </p>
                                    <p>
                                        {{ $t('basics.textTwo') }}
                                    </p>
                                </div>
                            </template>
                        </a-popover>
                    </div>
                </div>
            </div>
            <div class="container-content-header mt10 mb10">
                <span style="font-size: 16px; font-weight: bold"
                    ><span class="mr6 cr text-[red]">{{ username }}</span>
                    {{ $t('basics.derenwu') }}</span
                >
                <span
                    >{{ $t('basics.suiduofasong') }}{{ totalNum
                    }}{{ $t('basics.tiao') }}</span
                >
            </div>
            <div class="container-content">
                <a-table
                    :stripe="true"
                    :columns="columns"
                    :data="userTaskList"
                    :loading="loading"
                    :pagination="false"
                >
                    <template #status="{ record }">
                        <span v-if="record.status == 1">{{
                            $t('basics.weikaishi')
                        }}</span>
                        <span v-if="record.status == 2">{{
                            $t('basics.jingxingzhong')
                        }}</span>
                        <span v-if="record.status == 3">{{
                            $t('basics.tingzhi')
                        }}</span>
                        <span v-if="record.status == 4">{{
                            $t('basics.yiwancheng')
                        }}</span>
                    </template>
                    <template #operate="{ record }">
                        <a-link @click="deleteTask(record)">
                            {{ $t('basics.delete') }}</a-link
                        >
                        <a-link
                            v-if="record.status == 1"
                            @click="changeStatus(record, 2)"
                        >
                            {{ $t('basics.kaishi') }}</a-link
                        >
                        <a-link
                            v-if="record.status == 2"
                            @click="changeStatus(record, 3)"
                        >
                            {{ $t('basics.zanting') }}</a-link
                        >
                        <a-link
                            v-if="record.status == 3"
                            @click="changeStatus(record, 2)"
                        >
                            {{ $t('basics.jixu') }}</a-link
                        >
                        <a-link @click="toDetail(record.id)">
                            {{ $t('basics.xiangqing') }}</a-link
                        >
                    </template>
                </a-table>
                <div class="container-content-bottom">
                    {{ $t('basics.taskTxt') }}
                </div>
            </div>
            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                @success="refresh"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getUserprojectDetail,
    getUserTaskList,
    deleteUserTask,
    updateStatus
} from '@/api/america/massProduction.js';
import { getProjectId } from '@/api/cloud/userProject.js';
import MaImport from './components/import.vue';
import getUserInfo from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const loading = ref(false);
const crudImportRef = ref();
const form = ref({});
const totalNum = ref(0);
const userTaskList = ref([]);
const projectName = ref('');
const columns = [
    {
        title: t('basics.serialNumber'),
        dataIndex: 'id',
        minWidth: 60
    },
    {
        title: t('basics.chuangjianshijian'),
        dataIndex: 'created_at',
        minWidth: 200
    },
    {
        title: t('basics.kaishishijian'),
        dataIndex: 'began_at',
        minWidth: 200,
        slotName: 'began_at'
    },
    {
        title: t('basics.renwumingchen'),
        dataIndex: 'task_name',
        minWidth: 100,
        ellipsis: true
    },
    {
        title: t('basics.yifasong'),
        dataIndex: 'num_of_sent',
        minWidth: 100
    },
    {
        title: t('basics.expectedSend'),
        dataIndex: 'num_of_message',
        minWidth: 100,
        align: 'left'
    },
    {
        title: t('basics.fsSecc'),
        dataIndex: 'num_of_success_sent',
        minWidth: 100
    },
    {
        title: t('basics.fsFail'),
        dataIndex: 'num_of_failed_sent',
        minWidth: 100
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 100,
        slotName: 'status'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 150,
        slotName: 'operate'
    }
];
// 获取韩国短信id
const getId = () => {
    getProjectId({ project_key: 'korea' }).then((res) => {
        form.value.project_id = res.data.id;
        projectName.value = res.data.project_name;
        getUserTask();
        getUserproject();
    });
};
getId();
const username = getUserInfo().user.username;
const importButton = (params) => {
    if (!form.value.task_name) {
        proxy.$message.error(t('basics.renwumingchenText'));
        return;
    }
    crudImportRef.value.open();
};
// 获取最多发送条数
const getUserproject = () => {
    getUserprojectDetail({ project_id: form.value.project_id }).then((res) => {
        if (res.data) {
            if (res.data.num_of_message_available) {
                totalNum.value = res.data.num_of_message_available;
            }
        }
    });
};
// 修改状态
const changeStatus = (row, num) => {
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.confirmTask'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        simple: false,
        onOk: () => {
            updateStatus({ id: row.id, status: num }).then((res) => {
                if (res.code == 200) {
                    proxy.$message.success(t('basics.controlsSecc'));
                    getUserTask();
                }
            });
        }
    });
};
//   导入成功后
const refresh = () => {
    getUserTask();
};

const importFile = ref({
    url: 'cloud/userTask/import',
    params: form.value
});

// 去到详情
const router = useRouter();
const toDetail = async (id) => {
    try {
        await router.push({ name: 'korea:taskDetail', query: { id } });
    } catch (error) {
        if (error.isNavigationFailure) {
            // 处理导航失败的情况
            console.error('Navigation failed due to permissions', error);
        } else {
            proxy.$message.error('没有权限');
        }
    }
};
const getUserTask = () => {
    loading.value = true;
    getUserTaskList({ project_id: form.value.project_id }).then((res) => {
        userTaskList.value = res.data.items;
        loading.value = false;
    });
};
const deleteTask = (row) => {
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.deleteContent'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        simple: false,
        onOk: () => {
            deleteUserTask({ id: row.id }).then((res) => {
                if (res.code == 200) {
                    proxy.$message.success(t('basics.controlsSecc'));
                    getUserTask();
                }
            });
        }
    });
};
</script>
<script>
export default { name: 'korea:task' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.container-content-bottom {
    color: red;
    text-align: end;
}
</style>
